<template>
    <a-drawer
            :title="title"
            :maskClosable="true"
            :width="drawerWidth"
            placement="right"
            :closable="true"
            @close="handleCancel"
            :visible="visible"
            style="height: 100%;overflow: auto;padding-bottom: 53px;">

        <template slot="title">
            <div style="width: 100%;">
                <span>{{ title }}</span>
                <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
                  <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
                </span>
            </div>
        </template>

        <a-spin :spinning="confirmLoading">
            <a-form :form="form">

                <a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="请输入用户账号" v-decorator.trim="[ 'username', validatorRules.username]"/>
<!--                    :readOnly="!!model.id"-->
                </a-form-item>

                <template v-if="!model.id">
                    <a-form-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-input type="password" placeholder="请输入登录密码"
                                 v-decorator="[ 'password',validatorRules.password]"/>
                    </a-form-item>

                    <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登录密码"
                                 v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
                    </a-form-item>
                </template>

                <a-form-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="请输入用户姓名" v-decorator.trim="[ 'realname', validatorRules.realname]"/>
                </a-form-item>

<!--                <a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--                    <j-select-position placeholder="请选择职务" :multiple="false" v-decorator="['post', {}]"/>-->
<!--                </a-form-item>-->

                <a-form-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled">
                    <a-select
                            mode="multiple"
                            :disabled="departDisabled"
                            style="width: 100%"
                            placeholder="请选择用户角色"
                            optionFilterProp="children"
                            v-model="selectedRole"
                            :getPopupContainer="(target) => target.parentNode">
                        <a-select-option v-for="(role,roleindex) in roleList" :key="roleindex.toString()"
                                         :value="role.id">
                            {{ role.roleName }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <!--部门分配-->
<!--                <a-form-item label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">-->
<!--                    <a-input-search-->
<!--                            placeholder="点击选择部门"-->
<!--                            v-model="checkedDepartNameString"-->
<!--                            readOnly-->
<!--                            @search="onSearch">-->
<!--                        <a-button slot="enterButton" icon="search">选择</a-button>-->
<!--                    </a-input-search>-->
<!--                </a-form-item>-->

                <!--所属收运公司-->
                <a-form-item label="所属收运公司" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-search-select-tag
                            placeholder="请选择所属收运公司"
                            v-model="selectedCompanyId"
                            dict="hc_companys,company_name,id"
                    />
                </a-form-item>

                <!-- 省市县级联 -->
                <a-form-item label="所在区域" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <select-address v-if="refreshAddress" :areaOption="areaOption" @change="changeArea" ></select-address>
                </a-form-item>

                <!-- 详细地址 -->
                <a-form-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-textarea v-model="address" autocomplete="off"
                                placeholder="详细地址"></a-textarea>
                </a-form-item>

                <!--租户分配-->
<!--                <a-form-item label="租户分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">-->

<!--                    <a-select-->
<!--                            mode="multiple"-->
<!--                            style="width: 100%"-->
<!--                            placeholder="请选择租户分配"-->
<!--                            :disabled="disableSubmit"-->
<!--                            v-model="currentTenant">-->
<!--                        <a-select-option v-for="(item, index) in tenantList" :key="index" :value="item.id">-->
<!--                            {{ item.name }}-->
<!--                        </a-select-option>-->
<!--                    </a-select>-->
<!--                </a-form-item>-->

<!--                <a-form-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--                    <a-radio-group-->
<!--                            v-model="identity"-->
<!--                            @change="identityChange">-->
<!--                        <a-radio value="1">普通用户</a-radio>-->
<!--                        <a-radio value="2">上级</a-radio>-->
<!--                    </a-radio-group>-->
<!--                </a-form-item>-->

<!--                <a-form-item label="负责部门" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="departIdShow==true">-->
<!--                    <a-select-->
<!--                            mode="multiple"-->
<!--                            style="width: 100%"-->
<!--                            placeholder="请选择负责部门"-->
<!--                            v-model="departIds"-->
<!--                            optionFilterProp="children"-->
<!--                            :getPopupContainer="(target) => target.parentNode"-->
<!--                            :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"-->
<!--                    >-->
<!--                        <a-select-option v-for="item in resultDepartOptions" :key="item.key" :value="item.key"-->
<!--                        >{{item.title}}-->
<!--                        </a-select-option-->
<!--                        >-->
<!--                    </a-select>-->
<!--                </a-form-item>-->

                <!-- update--end--autor:wangshuai-----date:20200108------for：新增身份和负责部门------ -->
                <a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-image-upload class="avatar-uploader" text="上传" v-model="fileList"></j-image-upload>
                </a-form-item>

<!--                <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--                    <a-date-picker-->
<!--                            style="width: 100%"-->
<!--                            placeholder="请选择生日"-->
<!--                            v-decorator="['birthday', {initialValue:!model.birthday?null:moment(model.birthday,dateFormat)}]"-->
<!--                            :getCalendarContainer="node => node.parentNode"/>-->
<!--                </a-form-item>-->

<!--                <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--                    <a-select v-decorator="[ 'sex', {}]" placeholder="请选择性别"-->
<!--                              :getPopupContainer="(target) => target.parentNode">-->
<!--                        <a-select-option :value="1">男</a-select-option>-->
<!--                        <a-select-option :value="2">女</a-select-option>-->
<!--                    </a-select>-->
<!--                </a-form-item>-->

                <a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="请输入手机号码" :disabled="isDisabledAuth('user:form:phone')"
                             v-decorator="[ 'phone', validatorRules.phone]"/>
                </a-form-item>

<!--                <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--                    <a-input placeholder="请输入邮箱" v-decorator="[ 'email', validatorRules.email]"/>-->
<!--                </a-form-item>-->

<!--                <a-form-item label="座机" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--                    <a-input placeholder="请输入座机" v-decorator="[ 'telephone', validatorRules.telephone]"/>-->
<!--                </a-form-item>-->

                <a-form-item label="机构编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="已绑定的医疗机构编码" v-decorator="[ 'customerNumber']"/>
                </a-form-item>

                <a-form-item label="用户状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select v-decorator="['status', {}]" placeholder="请选择用户状态"
                              :getPopupContainer="(target) => target.parentNode">
                        <a-select-option :value="1">正常</a-select-option>
                        <a-select-option :value="2">冻结</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="工作流引擎" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-dict-select-tag v-decorator="['activitiSync', {}]" placeholder="请选择是否同步工作流引擎" :type="'radio'"
                                       :triggerChange="true" dictCode="activiti_sync"/>
                </a-form-item>

            </a-form>
        </a-spin>
        <depart-window ref="departWindow" @ok="modalFormOk"></depart-window>

        <div class="drawer-bootom-button" v-show="!disableSubmit">
            <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
                <a-button style="margin-right: .8rem">取消</a-button>
            </a-popconfirm>
            <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
        </div>
    </a-drawer>
</template>

<script>
    import pick from 'lodash.pick'
    import moment from 'moment'
    import Vue from 'vue'
    // 引入搜索部门弹出框的组件
    import departWindow from './DepartWindow'
    import JSelectPosition from '@/components/jeecgbiz/JSelectPosition'
    import { ACCESS_TOKEN } from '@/store/mutation-types'
    import { getAction } from '@/api/manage'
    import { addUser, duplicateCheck, editUser, queryall, queryUserRole } from '@/api/api'
    import { disabledAuthFilter } from '@/utils/authFilter'
    import JImageUpload from '../../../components/jeecg/JImageUpload'
    import JSearchSelectTag from '@/components/dict/JSearchSelectTag' // 模糊下拉查询
    import SelectAddress from '@/components/Jane/SelectAddress'

    export default {
        name: 'UserModal',
        components: {
            JImageUpload,
            departWindow,
            JSelectPosition,
            JSearchSelectTag,
            SelectAddress,
        },
        data() {
            return {
                refreshAddress : true,
                areaOption : {},

                departDisabled: false, //是否是我的部门调用该页面
                roleDisabled: false, //是否是角色维护调用该页面
                modalWidth: 800,
                drawerWidth: 700,
                modaltoggleFlag: true,
                confirmDirty: false,
                selectedDepartKeys: [], //保存用户选择部门id
                checkedDepartKeys: [],
                checkedDepartNames: [], // 保存部门的名称 =>title
                checkedDepartNameString: '', // 保存部门的名称 =>title
                resultDepartOptions: [],
                userId: '', //保存用户id
                disableSubmit: false,
                userDepartModel: { userId: '', departIdList: [] }, // 保存SysUserDepart的用户部门中间表数据需要的对象
                dateFormat: 'YYYY-MM-DD',
                validatorRules: {
                    username: {
                        rules: [{
                            required: true, message: '请输入用户账号!'
                        }, {
                            validator: this.validateUsername
                        }]
                    },
                    password: {
                        rules: [{
                            required: true,
                            pattern: /^[0-9a-zA-Z]{6,32}$/,
                            message: '密码输入6-32位字符!'
                        }, {
                            validator: this.validateToNextPassword
                        }]
                    },
                    confirmpassword: {
                        rules: [{
                            required: true, message: '请重新输入登录密码!'
                        }, {
                            validator: this.compareToFirstPassword
                        }]
                    },
                    realname: { rules: [{ required: true, message: '请输入用户名称!' }] },
                    phone: { rules: [{ validator: this.validatePhone }] },
                    email: {
                        rules: [{
                            validator: this.validateEmail
                        }]
                    },
                    roles: {},
                    //  sex:{initialValue:((!this.model.sex)?"": (this.model.sex+""))}
                    workNo: {
                        rules: [
                            { required: true, message: '请输入工号' },
                            { validator: this.validateWorkNo }
                        ]
                    },
                    telephone: {
                        rules: [
                            { pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码' }
                        ]
                    }
                },
                departIdShow: false,
                departIds: [], //负责部门id
                title: '操作',
                visible: false,
                model: {},
                roleList: [],
                selectedRole: [],
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 }
                },
                uploadLoading: false,
                confirmLoading: false,
                headers: {},
                form: this.$form.createForm(this),
                picUrl: '',
                url: {
                    fileUpload: window._CONFIG['domianURL'] + '/sys/common/upload',
                    userWithDepart: '/sys/user/userDepartList', // 引入为指定用户查看部门信息需要的url
                    userId: '/sys/user/generateUserId', // 引入生成添加用户情况下的url
                    syncUserByUserName: '/act/process/extActProcess/doSyncUserByUserName',//同步用户到工作流
                    queryTenantList: '/sys/tenant/queryList'
                },
                identity: '1',
                fileList: [],
                tenantList: [],
                currentTenant: [],
                selectedCompanyId: '', // 所属废物处理单位

                address: '' // 详细地址
            }
        },
        created() {
            const token = Vue.ls.get(ACCESS_TOKEN)
            this.headers = { 'X-Access-Token': token }
            this.initTenantList()

        },
        computed: {
            uploadAction: function() {
                return this.url.fileUpload
            }
        },
        methods: {
            async changeArea(opt) {
                let option = {};
                if(opt.provinceCode){
                    option['provinceCode'] = opt.provinceCode || '';
                }
                if(opt.province){
                    option['province'] = opt.province || '';
                }
                if(opt.cityCode){
                    option['cityCode'] = opt.cityCode || '';
                }
                if(opt.city){
                    option['city'] = opt.city || '';
                }
                if(opt.areaCode){
                    option['areaCode'] = opt.areaCode || '';
                }
                if(opt.area){
                    option['area'] = opt.area || '';
                }
                this.model = Object.assign(this.model, option);
                this.areaOption = option;
            },
            isDisabledAuth(code) {
                return disabledAuthFilter(code)
            },
            initTenantList() {
                getAction(this.url.queryTenantList).then(res => {
                    if (res.success) {
                        this.tenantList = res.result
                    }
                })
            },
            //窗口最大化切换
            toggleScreen() {
                if (this.modaltoggleFlag) {
                    this.modalWidth = window.innerWidth
                } else {
                    this.modalWidth = 800
                }
                this.modaltoggleFlag = !this.modaltoggleFlag
            },
            initialRoleList() {
                queryall().then((res) => {
                    if (res.success) {
                        this.roleList = res.result
                    } else {
                        console.log(res.message)
                    }
                })
            },
            loadUserRoles(userid) {
                queryUserRole({ userid: userid }).then((res) => {
                    if (res.success) {
                        this.selectedRole = res.result
                    } else {
                        console.log(res.message)
                    }
                })
            },
            refresh() {
                this.selectedDepartKeys = []
                this.checkedDepartKeys = []
                this.checkedDepartNames = []
                this.checkedDepartNameString = ''
                this.userId = ''
                this.resultDepartOptions = []
                this.departId = []
                this.departIdShow = false
                this.currentTenant = []
                this.selectedCompanyId = ''
                this.address = ''
            },
            add() {
                this.picUrl = ''
                this.refresh()
                this.edit({
                    activitiSync: '1' ,
                    status: '1' ,
                })
            },
            edit(record) {
                console.log('record ==> ', record)
                this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
                let that = this
                that.initialRoleList()
                that.checkedDepartNameString = ''
                that.form.resetFields()
                if (record.hasOwnProperty('id')) {
                    that.loadUserRoles(record.id)
                    setTimeout(() => {
                        this.fileList = record.avatar
                    }, 5)
                }
                that.userId = record.id

                that.visible = true;
                let opt = record;
                let option = {};
                if(opt.provinceCode){
                    option['provinceCode'] = opt.provinceCode || '';
                }
                if(opt.province){
                    option['province'] = (opt.province || '').trim();
                }
                if(opt.cityCode){
                    option['cityCode'] = opt.cityCode || '';
                }
                if(opt.city){
                    option['city'] = (opt.city || '').trim();
                }
                if(opt.areaCode){
                    option['areaCode'] = opt.areaCode || '';
                }
                if(opt.area){
                    option['area'] = (opt.area || '').trim();
                }
                this.refreshAddress = false;
                this.$nextTick(() => {
                    this.refreshAddress = true;
                })
                this.areaOption = option;

                that.model = Object.assign({}, record, option)

                that.$nextTick(() => {
                    that.form.setFieldsValue(pick(this.model, 'username', 'sex', 'realname', 'email', 'phone', 'activitiSync', 'workNo', 'telephone', 'post', 'orgCodeTxt', 'departIds', 'customerNumber', 'status'))
                })
                //身份为上级显示负责部门，否则不显示
                if (this.model.userIdentity == '2') {
                    this.identity = '2'
                    this.departIdShow = true
                } else {
                    this.identity = '1'
                    this.departIdShow = false
                }

                this.selectedCompanyId = record.companysId || ''
                this.address = record.address || ''

                // 调用查询用户对应的部门信息的方法
                that.checkedDepartKeys = []
                that.loadCheckedDeparts()

                //update-begin-author:taoyan date:2020710 for:多租户配置
                if (!record.relTenantIds || record.relTenantIds.length == 0) {
                    this.currentTenant = []
                } else {
                    this.currentTenant = record.relTenantIds.split(',').map(Number)
                }
                //update-end-author:taoyan date:2020710 for:多租户配置
            },
            //
            loadCheckedDeparts() {
                let that = this
                if (!that.userId) {
                    return
                }
                getAction(that.url.userWithDepart, { userId: that.userId }).then((res) => {
                    that.checkedDepartNames = []
                    if (res.success) {
                        var depart = []
                        var departId = []
                        for (let i = 0; i < res.result.length; i++) {
                            that.checkedDepartNames.push(res.result[i].title)
                            this.checkedDepartNameString = this.checkedDepartNames.join(',')
                            that.checkedDepartKeys.push(res.result[i].key)
                            //新增负责部门选择下拉框
                            depart.push({
                                key: res.result[i].key,
                                title: res.result[i].title
                            })
                            departId.push(res.result[i].key)
                        }
                        that.resultDepartOptions = depart
                        //判断部门id是否存在，不存在择直接默认当前所在部门
                        if (this.model.departIds) {
                            this.departIds = this.model.departIds.split(',')
                        } else {
                            this.departIds = departId
                        }
                        that.userDepartModel.departIdList = that.checkedDepartKeys
                    } else {
                        console.log(res.message)
                    }
                })
            },
            close() {
                this.$emit('close')
                this.visible = false
                this.disableSubmit = false
                this.selectedRole = []
                this.userDepartModel = { userId: '', departIdList: [] }
                this.checkedDepartNames = []
                this.checkedDepartNameString = ''
                this.checkedDepartKeys = []
                this.selectedDepartKeys = []
                this.resultDepartOptions = []
                this.departIds = []
                this.departIdShow = false
                this.identity = '1'
                this.fileList = []
            },
            moment,
            handleSubmit() {

                const that = this

                // 触发表单验证
                this.form.validateFields(async (err, values) => {
                    if (!err) {
                        that.confirmLoading = true
                        if (!values.birthday) {
                            values.birthday = ''
                        } else {
                            values.birthday = values.birthday.format(this.dateFormat)
                        }
                        let formData = Object.assign(this.model, values)
                        console.log('提交数据', formData)

                        if (that.fileList != '') {
                            formData.avatar = that.fileList
                        } else {
                            formData.avatar = null
                        }
                        //update-begin-author:taoyan date:2020710 for:多租户配置
                        formData.relTenantIds = this.currentTenant.length > 0 ? this.currentTenant.join(',') : ''
                        //update-end-author:taoyan date:2020710 for:多租户配置
                        formData.selectedroles = this.selectedRole.length > 0 ? this.selectedRole.join(',') : ''
                        formData.selecteddeparts = this.userDepartModel.departIdList.length > 0 ? this.userDepartModel.departIdList.join(',') : ''
                        formData.userIdentity = this.identity
                        //如果是上级择传入departIds,否则为空
                        if (this.identity === '2') {
                            formData.departIds = this.departIds.join(',')
                        } else {
                            formData.departIds = ''
                        }
                        // that.addDepartsToUser(that,formData); // 调用根据当前用户添加部门信息的方法

                        formData.companysId = this.selectedCompanyId || ''

                        let obj
                        if (!this.model.id) {
                            formData.id = this.userId
                            obj = addUser(formData)
                        } else {
                            obj = editUser(formData)
                        }
                        obj.then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.$emit('ok')
                            } else {
                                that.$message.warning(res.message)
                            }
                        }).finally(() => {

                            that.confirmLoading = false
                            that.checkedDepartNames = []
                            that.userDepartModel.departIdList = { userId: '', departIdList: [] }
                            that.close()
                        })

                    }
                })
            },
            handleCancel() {
                this.close()
            },
            validateToNextPassword(rule, value, callback) {
                const form = this.form
                const confirmpassword = form.getFieldValue('confirmpassword')

                if (value && confirmpassword && value !== confirmpassword) {
                    callback('两次输入的密码不一样！')
                }
                if (value && this.confirmDirty) {
                    form.validateFields(['confirm'], { force: true })
                }
                callback()
            },
            compareToFirstPassword(rule, value, callback) {
                const form = this.form
                if (value && value !== form.getFieldValue('password')) {
                    callback('两次输入的密码不一样！')
                } else {
                    callback()
                }
            },
            validatePhone(rule, value, callback) {
                if (!value) {
                    callback()
                } else {
                    //update-begin--Author:kangxiaolin  Date:20190826 for：[05] 手机号不支持199号码段--------------------
                    if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
                        //update-end--Author:kangxiaolin  Date:20190826 for：[05] 手机号不支持199号码段--------------------

                        var params = {
                            tableName: 'sys_user',
                            fieldName: 'phone',
                            fieldVal: value,
                            dataId: this.userId
                        }
                        duplicateCheck(params).then((res) => {
                            if (res.success) {
                                callback()
                            } else {
                                callback('手机号已存在!')
                            }
                        })
                    } else {
                        callback('请输入正确格式的手机号码!')
                    }
                }
            },
            validateEmail(rule, value, callback) {
                if (!value) {
                    callback()
                } else {
                    if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
                        var params = {
                            tableName: 'sys_user',
                            fieldName: 'email',
                            fieldVal: value,
                            dataId: this.userId
                        }
                        duplicateCheck(params).then((res) => {
                            console.log(res)
                            if (res.success) {
                                callback()
                            } else {
                                callback('邮箱已存在!')
                            }
                        })
                    } else {
                        callback('请输入正确格式的邮箱!')
                    }
                }
            },
            validateUsername(rule, value, callback) {
                var params = {
                    tableName: 'sys_user',
                    fieldName: 'username',
                    fieldVal: value,
                    dataId: this.userId
                }
                duplicateCheck(params).then((res) => {
                    if (res.success) {
                        callback()
                    } else {
                        callback('用户名已存在!')
                    }
                })
            },
            validateWorkNo(rule, value, callback) {
                var params = {
                    tableName: 'sys_user',
                    fieldName: 'work_no',
                    fieldVal: value,
                    dataId: this.userId
                }
                duplicateCheck(params).then((res) => {
                    if (res.success) {
                        callback()
                    } else {
                        callback('工号已存在!')
                    }
                })
            },
            handleConfirmBlur(e) {
                const value = e.target.value
                this.confirmDirty = this.confirmDirty || !!value
            },

            normFile(e) {
                console.log('Upload event:', e)
                if (Array.isArray(e)) {
                    return e
                }
                return e && e.fileList
            },
            beforeUpload: function(file) {
                var fileType = file.type
                if (fileType.indexOf('image') < 0) {
                    this.$message.warning('请上传图片')
                    return false
                }
                //TODO 验证文件大小
            },
            handleChange(info) {
                this.picUrl = ''
                if (info.file.status === 'uploading') {
                    this.uploadLoading = true
                    return
                }
                if (info.file.status === 'done') {
                    var response = info.file.response
                    this.uploadLoading = false
                    console.log(response)
                    if (response.success) {
                        this.model.avatar = response.message
                        this.picUrl = 'Has no pic url yet'
                    } else {
                        this.$message.warning(response.message)
                    }
                }
            },
            // 搜索用户对应的部门API
            onSearch() {
                this.$refs.departWindow.add(this.checkedDepartKeys, this.userId)
            },

            // 获取用户对应部门弹出框提交给返回的数据
            modalFormOk(formData) {
                this.checkedDepartNames = []
                this.selectedDepartKeys = []
                this.checkedDepartNameString = ''
                this.userId = formData.userId
                this.userDepartModel.userId = formData.userId
                this.departIds = []
                this.resultDepartOptions = []
                var depart = []
                for (let i = 0; i < formData.departIdList.length; i++) {
                    this.selectedDepartKeys.push(formData.departIdList[i].key)
                    this.checkedDepartNames.push(formData.departIdList[i].title)
                    this.checkedDepartNameString = this.checkedDepartNames.join(',')
                    //新增部门选择，如果上面部门选择后不为空直接付给负责部门
                    depart.push({
                        key: formData.departIdList[i].key,
                        title: formData.departIdList[i].title
                    })
                    this.departIds.push(formData.departIdList[i].key)
                }
                this.resultDepartOptions = depart
                this.userDepartModel.departIdList = this.selectedDepartKeys
                this.checkedDepartKeys = this.selectedDepartKeys  //更新当前的选择keys
            },
            // 根据屏幕变化,设置抽屉尺寸
            resetScreenSize() {
                let screenWidth = document.body.clientWidth
                if (screenWidth < 500) {
                    this.drawerWidth = screenWidth
                } else {
                    this.drawerWidth = 700
                }
            },
            identityChange(e) {
                if (e.target.value === '1') {
                    this.departIdShow = false
                } else {
                    this.departIdShow = true
                }
            }
        }
    }
</script>

<style scoped>
    .avatar-uploader > .ant-upload {
        width: 104px;
        height: 104px;
    }

    .ant-upload-select-picture-card i {
        font-size: 49px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }

    .ant-table-tbody .ant-table-row td {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .drawer-bootom-button {
        position: absolute;
        bottom: -8px;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        left: 0;
        background: #fff;
        border-radius: 0 0 2px 2px;
    }
</style>
